Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Virtual Scroller
The v-virtual-scroll component lets us display a virtual, infinite list.
It supports dynamic height and scrolling vertically.
To use it, we can write:
<template>
<v-card class="mx-auto" max-width="400">
<v-virtual-scroll :items="items" :item-height="50" height="300">
<template v-slot="{ item }">
<v-list-item>
<v-list-item-avatar>{{ item.initials }}</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>{{ item.fullName }}</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-btn depressed small>
View User
<v-icon color="orange darken-4" right>mdi-open-in-new</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</template>
</v-virtual-scroll>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
colors: ["#2196F3", "#90CAF9", "#64B5F6"],
names: ["Oliver", "Jake", "Noah", "James", "Jack"],
surnames: ["Smith", "Anderson", "Clark", "Wright", "Mitchell"],
}),
computed: {
items() {
const namesLength = this.names.length;
const surnamesLength = this.surnames.length;
const colorsLength = this.colors.length;
return Array.from({ length: 10000 }, (k, v) => {
const name = this.names[this.genRandomIndex(namesLength)];
const surname = this.surnames[this.genRandomIndex(surnamesLength)];
return {
color: this.colors[this.genRandomIndex(colorsLength)],
fullName: `${name} ${surname}`,
initials: `${name[0]}${surname[0]}`,
};
});
},
},
methods: {
genRandomIndex(length) {
return Math.ceil(Math.random() * (length - 1));
},
},
};
</script>
We create an array of random names with the items computed property.
Then in the template, we use the v-virtual-scroll component to render the items with the items prop.
The item slot prop has the array entry with the item.
Click Outside
The v-click-outside directive calls a function when we click on something outside the target element.
This is used with components like v-menu and v-dialog .
For example, we can use it by writing:
<template>
<v-list>
<v-list-item v-click-outside="onClickOutsideStandard" @click="models.base = true">
<v-list-item-title>Default Click Outside</v-list-item-title>
<v-list-item-action>
<v-icon :color="models.base ? 'green' : 'red'">mdi-record</v-icon>
</v-list-item-action>
</v-list-item>
<v-list-item
v-click-outside="{
handler: onClickOutsideWithConditional,
closeConditional,
}"
@click="models.conditional = true"
>
<v-list-item-title>Close Conditional</v-list-item-title>
<v-list-item-action>
<v-icon :color="models.conditional ? 'green' : 'red'">mdi-record</v-icon>
</v-list-item-action>
</v-list-item>
</v-list>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
models: {
base: false,
conditional: false,
},
}),
methods: {
onClickOutsideStandard() {
this.models.base = false;
},
onClickOutsideWithConditional() {
this.models.conditional = false;
},
closeConditional(e) {
return this.models.conditional;
},
},
};
</script>
We have the v-click-outside directive on the v-list-item to ley us toggle the dot’s color when we click outside the list item.
The closeConditional has the callback to run when we click outside the component.
Conclusion
We can add a virtual scroller and a directive to detect clicks outside an element with Vuetify.
